<template>
    <div>
    <div class="container"> 
    <div class="handle-box">
        <el-row class="top-btn">
     		  <el-col :span="12">
                    <el-button type="success" @click="handleAllDelete">删除所有</el-button> 
                    <el-button  @click="rollback"  style="color:#1C84C6">返回</el-button> 
                </el-col>      
            <el-col  :span="12">
                <el-input class="handle-input"  placeholder="请输入要查询的日志关键字">
                    <template #append>
                        <el-button :icon="Search" />
                    </template>
                </el-input>
         </el-col>                       
	    </el-row>
    </div>      
    <el-divider></el-divider>  
    <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{color:'#2A62BC'}"
        border
        @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"  align="center"/>
    <el-table-column prop="id" label="序号"   align="center"/>
    <el-table-column label="访问方法"   align="center">
      <template #default="scope">{{ scope.row.method }}</template>
    </el-table-column>
    <el-table-column prop="uri" label="访问的URI"  align="center"/>
    <el-table-column prop="date" label="访问时间"  align="center"/>
    <el-table-column prop="time" label="访问时长"  align="center"   > </el-table-column>
    <el-table-column label="操作"  align="center">
        <template #default="scope">
			<el-row class="right-btn">
	          <el-button color="#e35148" :icon="Delete"  @click="handleDelete(scope.$index,row)">删除</el-button>
			</el-row>
		</template>
    </el-table-column>
  </el-table>
</div>

</div>
</template>

<script setup>
import { ref ,reactive,toRefs} from 'vue'
import { Search } from '@element-plus/icons-vue'
import imgURL from '@/assets/img/dn.png'
import {getLogList} from '@/api/index'
/*******返回****** */
/**flag日志组件的显示 */
const props = defineProps({
    flag:String
})
const {flag}  = toRefs(props)
console.log(flag,'=======')
const emit  = defineEmits(['update:flag'])
const  rollback = ()=>{
    emit('update:flag','1')
}

const multipleTableRef = ref()
const multipleSelection = ref([]) //被选中的选项
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
/***********获取表格数据************** */
const tableData = ref([])
const getData=()=>{
    getLogList({}).then(res=>{
      // console.log(res,'<<<getLogList res')
      tableData.value=res.data
    })
 }
 getData()
/*************删除单个日志的操作**************/
const  handleDelete=(index,row)=>{
  //to 删除
  // 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
	.then(() => {
		ElMessage.success('删除成功');
		//to 传递id 到后台 
		
		// 删除成功后
		// getData()
	})
	.catch(() => {});
}
/**************删除多个日志的操作************************* */
/*******删除多个**** */
//删除多个数据  to......
const handleAllDelete =()=>{
	// console.log('删除多个')
	console.log(multipleSelection.value,'===拿到所有要删除的日志数据====')
	if (multipleSelection.value.length==0) {
		ElMessage.error('请选择项')
		return
  	}
	// console.log(state.multipleSelection.map(item=>item.id))
	//axios删除的操作
	// deleteAllAdmin({ids:state.multipleSelection.map(item=>item.id)})	
}

</script >
<style lang="less" scoped>
.handle-box {
	margin-bottom: 20px;  
}


.handle-input {
  float: right;
	width: 240px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.blue {
	color: #1296e2;
	font-weight: bold;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.cell{
    display: inline-block;
    .el-button{
        margin-left: 0px;
    }
}

.right-btn{
 	justify-content:center;
	.el-button{
		margin-right: 6px;
		padding: 1px 5px;
	}
}
.form-demo{
    .el-input{
        width: 60%;
    }
    .el-input-number{
        width: 60%;
    }
   
}

.handle-input .el-input-group__append button.el-button, .el-input-group__append button.el-button:hover {
    background-color: #1C84C6;
    color: #fff;
    font-weight: 700;
} 
</style>